/*
 * @Author: HuangYue
 * @Date: 2022-02-28 15:32:23
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-04-28 12:08:25
 * @FilePath: /graduation/src/pages/user/Account/AccountCenter/index.jsx
 * @Description:个人中心
 */
import { PlusOutlined, HomeOutlined, ContactsOutlined, ClusterOutlined } from '@ant-design/icons';
import { Avatar, Card, Col, Divider, Input, Row, Tag } from 'antd';
import useModal from 'antd/lib/modal/useModal';
import React, { useState, useRef } from 'react';
import { Link, useRequest, useModel } from 'umi';
import styles from './Center.less';

const TagList = ({ tags }) => {
  const ref = useRef(null);
  const [newTags, setNewTags] = useState([]);
  const [inputVisible, setInputVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const showInput = () => {
    setInputVisible(true);

    if (ref.current) {
      // eslint-disable-next-line no-unused-expressions
      ref.current?.focus();
    }
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleInputConfirm = () => {
    let tempsTags = [...newTags];

    if (inputValue && tempsTags.filter((tag) => tag.label === inputValue).length === 0) {
      tempsTags = [
        ...tempsTags,
        {
          key: `new-${tempsTags.length}`,
          label: inputValue,
        },
      ];
    }

    setNewTags(tempsTags);
    setInputVisible(false);
    setInputValue('');
  };

  return (
    <div className={styles.tags}>
      <div className={styles.tagsTitle}>标签</div>
      {(tags || []).concat(newTags).map((item) => (
        <Tag key={item.key}>{item.label}</Tag>
      ))}
      {inputVisible && (
        <Input
          ref={ref}
          type="text"
          size="small"
          style={{
            width: 78,
          }}
          value={inputValue}
          onChange={handleInputChange}
          onBlur={handleInputConfirm}
          onPressEnter={handleInputConfirm}
        />
      )}
      {!inputVisible && (
        <Tag
          onClick={showInput}
          style={{
            borderStyle: 'dashed',
          }}
        >
          <PlusOutlined />
        </Tag>
      )}
    </div>
  );
};

const renderUserInfo = ({ access, geographic, hospital = [] }) => {
  const getAccessForText = (type) => {
    if (access === 'admin') return type === 'title' ? '平台管理方' : ['Telemedicine平台管理者'];
    if (access === 'user') return type === 'title' ? '入驻医院' : hospital;
    if (access === 'engineer') return type === 'title' ? '维修工程师' : ['Telemedicine维修工程师'];
  };
  return (
    <div className={styles.detail}>
      <p>
        <ContactsOutlined
          style={{
            marginRight: 8,
          }}
        />
        {getAccessForText('title')}
      </p>
      <p>
        <ClusterOutlined
          style={{
            marginRight: 8,
          }}
        />
        {getAccessForText('group').map((item) => {
          // todo:这个地方字段命名是否可以改为 hospitalName ?
          return item.hospitalNames || item;
        })}
      </p>
      <p>
        <HomeOutlined
          style={{
            marginRight: 8,
          }}
        />
        {
          (
            geographic || {
              province: {
                label: '',
              },
            }
          ).province.label
        }
        {
          (
            geographic || {
              city: {
                label: '',
              },
            }
          ).city.label
        }
      </p>
    </div>
  );
};
function AccountCenter() {
  const { initialState, serInitialState } = useModel('@@initialState');
  //获取当前用户信息
  const { currentUser } = initialState;

  return (
    <Card
      bordered={false}
      style={{
        marginBottom: 24,
      }}
    >
      {currentUser && (
        <div>
          <div className={styles.avatarHolder}>
            <img alt="" src={currentUser.avatar} />
            <div className={styles.name}>{currentUser.name}</div>
            {/* <div>{currentUser?.signature}</div> */}
          </div>
          {renderUserInfo(currentUser)}
          <Divider dashed />
          <TagList tags={currentUser.tags || []} />
          <Divider
            style={{
              marginTop: 16,
            }}
            dashed
          />
          <div className={styles.team}>
            <div className={styles.teamTitle}>团队</div>
            <Row gutter={36}>
              {currentUser.notice &&
                currentUser.notice.map((item) => (
                  <Col key={item.id} lg={24} xl={12}>
                    <Link to={item.href}>
                      <Avatar size="small" src={item.logo} />
                      {item.member}
                    </Link>
                  </Col>
                ))}
            </Row>
          </div>
        </div>
      )}
    </Card>
  );
}

export default AccountCenter;
